<template>
  <div class="note-list">
    <ul v-if="state.noteList.length">
      <li v-for="item in  state.noteList" :key="id" @click="goNoteDetail(item.id)">
        <div class="img">
          <img
            :src=item.head_img
            alt="">
        </div>
        <p class="time">{{ item.m_time }}</p>
        <p class="title">{{ item.title }}</p>
      </li>
    </ul>
    <p v-else class="empty">当前分类下还没有文章哦</p>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import axios from '../api/axios.js';
import { reactive } from 'vue';

const route=useRoute()
const router=useRouter()
const state=reactive({
  noteList:''
})

// console.log(route.query.title);
//请求数据
onMounted(async()=>{
 const {data}= await axios.post('/note/findNoteListByType',{
    note_type:route.query.title
  })
  // console.log(data);
  state.noteList=data
})

const goNoteDetail=(id)=>{
  router.push({path:'/noteDetail',query:{id:id}})
}
</script>

<style lang="less" scoped>
.note-list {
  width: 100%;
  padding: 1rem 0.667rem 0;
  box-sizing: border-box;
  ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li{
      width: 4rem;
      margin-bottom: 0.72rem;
      .img{
        width: 100%;
        height: 4rem;
        img{
          width: 100%;
          height: 100%;
          border-radius: 0.27rem;
        }
      }
      .time{
        font-size: 0.37rem;
        color: rgb(16, 16, 16,1);
        margin: 10px 0 5px 0;
      }
      .title{
        font-size: 0.37rem;
        color: rgb(16, 16, 16,1);
        overflow: hidden;
        // 超出不换行，省略显示
        white-space: nowrap;
        text-overflow:ellipsis ;
      }
    }
  }
}
</style>